<template>
	<!-- menu菜单 -->
	<view class="menus" v-if="menus.length">
		<swiper @change="menuSwiperChange" style="height: 328rpx;">
			<block v-for="(item, index) in menus" :key="index">
				<swiper-item>
					<view class="acea-row menus-siper">
						<view class="menus-item" v-for="(item1,index1) in item" :key="index1" @click="toPage(index,index1)">
							<image :src="item1.icon" mode=""></image>
							<view>{{item1.name}} </view>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<swiper-dot class="dot" :current="current" :list="menus"></swiper-dot>
	</view>
</template>

<script>
	import {
		getclassificationListApi
	} from '@/api/brand/index.js'
	import {
		getTypeApi
	} from '@/api/api.js'
	import swiperDot from "./swiperDots/swiperDots.vue"
	export default {
		components: {
			swiperDot
		},
		props: {
			types: {
				type: Number,
				default: ()=>''
			}
		},
		data() {
			return {
				menus: [
					[],
					[]
				],
				current: 0
			}
		},
		mounted() {
			this.getSupplyList()
		},
		methods: {
			//获取供应链
			async getSupplyList() {
				let res = null;
				let data =[]
				if (this.types == 5 || this.types == 6) {
					res = await getclassificationListApi();
					data = res.data
				}else if(this.types == 4){
					res = await getTypeApi()
					data = res.data.list
				}
			
				try {

					data.forEach((item, index) => {
						if (index < 8) {
							this.menus[0].push(item);
						} else {
							this.menus[1].push(item)
						}
					})
				} catch (e) {
					console.log(e)
				} finally {

				}
			},
			menuSwiperChange(e) {
				this.current = e.detail.current;
			},
			toPage(index,index1){
				let ind = (index*8)+index1
				let url = {
					5:'/pages/others/supplyChainList/supplyChainList'+'?index='+ind,
					4:'/pages/others/merchantServiceList/merchantServiceList'+'?index='+ind,
					6:'/pages/others/unusedList/unusedList?categoryOn='+ind
				};
				uni.navigateTo({
					url:url[this.types]
				})
			}
		}
	}
</script>

<style lang="scss">
	.menus {
		margin-bottom: 36rpx;

		.menus-item {
			width: 25%;
			font-size: 24rpx;

			color: rgba(51, 51, 51, 1);
			text-align: center;

			view {
				padding: 20rpx 0;
			}

			image {
				display: block;
				margin: 0 auto;
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>